<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function timeOutPro(delay) {
        // 返回Promise对象
        return new Promise((resolve) => {
          // 延迟2秒钟 成功
          setTimeout(() => {
            resolve(`延迟了${delay}秒`)
          }, delay * 1000)
        })
      }

      // await 可以等待 Promise完成
      async function func1() {
        const res1 = await timeOutPro(1) // 1s
        console.log('res1:', res1)
        const res2 = await timeOutPro(3) // 3s
        console.log('res2:', res2)
      }
      async function func2() {
        const res3 = await timeOutPro(2) // 2s
        console.log('res3:', res3)
        const res4 = await timeOutPro(4) // 4s
        console.log('res4:', res4)
      }

      async function func3() {
        console.log(22)
        // await func1()
        // await func2()
        func1().then((res) => {
          func2()
        })
      }
      // await 只能限制 function内部的执行顺序,不能影响function外部
      console.log('top')
      func3()
      console.log('bottom')
      // 输出的结果 top bottom res1 res2
    </script>
  </body>
</html>
